## Lesson 6.3 Теги для вёрстки структуры контента (Структурные тэги: header, footer, nav, aside, section, article, hgroup, main (по некоторым источникам не является структурным тегом))

### Учебный материал:

![](https://habrastorage.org/r/w1560/storage1/617fe369/2a645b1d/a197813c/012429b0.png)

### [По материалам: HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main](http://www.websovet.com/html5-novye-tegi-header-footer-nav-aside-section-article-hgroup)

- `header` - предназначен для определения шапки страницы.
- `footer` - предназначен для определения подвала страницы.

По сути, это избавляет от необходимости использовать нейтральный тэг `div` для обозначения данных частей сайта.
Можно, например, типичную запись:
```html
<div id="header">
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</div>
```
переписать по новому:
```html
<header>
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</header>
```
и в файле стилей CSS прописать набор правил непосредственно для тэга `header`.

Однако, большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок `a` или картинок `img`, например.

<details>

[Кратко](https://doka.guide/css/display/) 
> По умолчанию почти все элементы в HTML имеют блочный и строчный тип отображения. Но в вёрстке часто бывает, что нам нужно сделать элемент не строчным, а блочным. И наоборот.
> Тут на помощь приходит свойство CSS `{display}`✨
> Помимо значений `block` (блочное отображение) и `inline` (строчное отображение) существует смешанное значение `inline-block` (строчно-блочное отображение).
> Бывают и другие специфичные значения, например, `flex`, `grid`, `table-cell`.
</details>

Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:
```css
header, footer, nav, article {display: block;}
```
- `nav` — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.
- `aside` — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).
- `section` — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.
- `article` — служит для разбивки страницы на отдельные статьи.
```html
<section>
<article>
<h1>Заголовок</h1>
<p>Текст статьи</p>
</article>
<article>
<h1>Заголовок</h1>
<p>Текст статьи</p>
</article>
</section>
```
Особенности тэга `section` и `article`: 
1. Например, вы можете теперь смело использовать заголовок первого уровня `h1` на одной странице несколько раз, что ранее было недопустимо.
2. Кроме того, тэг `section` может быть как родительским элементом для `article`, так и разделять саму статью `article` на несколько секций. Т.е. вполне возможна такая конструкция:
```html
<section>
<article>
<section></section>
<section></section>
</article>
<article>
<section></section>
<section></section>
</article>
</section>
```
- `hgroup` — тэг призван группировать заголовки страницы в одну логическую единицу.

Например, главный заголовок всей страницы `h1` и описание к ней, оформленное тэгом `h3`. На странице в дальнейшем еще несколько раз могут использоваться тэги `h3` для других целей. Чтобы логически отделить описание страницы от других тэгов - `h3`, мы его объединяем с главным тэгом `h1` в группу, которая и обозначается тэгом `hgroup`:
```html
<hgroup>
<h1>Название сайта</h1>
<h3>Здесь описание сайта</h3>
</hgroup>
```
- `main` — представляет собой основное содержимое документа, или иначе — основной контент. 
```html
<body>
<header>
</header>
<main>
Основное, уникальное содержимое страницы сайта.
</main>
<aside>
</aside>
<footer>
</footer>
</body>
```
1. Отличие этого тэга от старого `body` в том, что `body` включает все содержимое страницы, тогда как `main` — основное, то есть **уникальное**. сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!
2. Он также не может входить в состав других структурных тэгов: `article`, `section`, `aside`, `footer`, `header` или `nav` в силу своей уникальности.
3. И так же, как и другие новые тэги, он не воспринимается браузерами, как блочный элемент, поэтому это свойство ему нужно задавать принудительно в файле CSS:
```css
main {display:block;}
```

[Не стоит  необдуманно менять старые добрые div-ы на новые теги](https://habr.com/ru/articles/124993/)
> *Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.*

[Назад. HTML5 первые шаги](http://www.websovet.com/html5-pervye-shagi) . . . [Вперед. HTML5 новые тэги time, figure, video, audio, canvas](http://www.websovet.com/html5-novye-tegi-time-figure-video-audio-canvas)

### [Свойство CSS {display} и его значения block, inline, inline-block, flex, grid, table-cell](https://doka.guide/css/display/)

**[Пример](https://doka.guide/css/display/#**primer**)**
Частая ситуация: на странице нужно показать иконки соцсетей со ссылками на аккаунты.

**Значения свойства, которые встречаются в работе чаще всего:**
- `none` — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
- `block` — элемент ведёт себя как блочный.
- `inline-block` — элемент ведёт себя снаружи как строчный, а внутри как блочный.
- `flex` — элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами. Подробнее в [Гайде по flexbox](https://doka.guide/css/flexbox-guide/).
- `grid` — элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки. Подробнее в [Гайде по grid](https://doka.guide/css/grid-guide/).

**В чём разница между inline и inline-block?**

Значение `display: inline` используется для элементов, которые отображаются в группе слов рядом с другими элементами, например в параграфе. Размеры строчных элементов определяются содержимым, так что установить их через CSS-свойства не получится. Так же не выйдет указать для них вертикальные `margin` и `padding`. Пример строчных элементов это `<span>` и `<a>` — свойство `display: inline` устанавливается для них браузером по умолчанию.

Элементы с `display: inline-block` также располагаются в потоке текста, но вы можете установить размеры такому элементу, а так же любые значения `margin` и `padding`. Это позволит элементу отображаться в строке, но занимать пространство как блочному элементу. Примеры элементов со значением `display: inline-block` по умолчанию: `<button>` или `<textarea>`.

- [Правила оформления HTML-кода](https://github.com/netology-code/codestyle/tree/master/html)
- [Правила оформления CSS-кода](https://github.com/netology-code/codestyle/tree/master/css)

### Код из лекции: 

- [Мой код](../My_code/)

### Дополнительные материалы:

- [Основы HTML & CSS](https://html5book.ru/osnovy-css/)
- [ОЧЕНЬ КРУТОЙ РЕСУРС!!! >>> Веб-технологии для разработчиков HTML & CSS & JS](https://developer.mozilla.org/ru/docs/Learn/HTML)
- [Валидатор кода](https://validator.w3.org/nu/)

- [ВЕБСОВЕТ. HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main](http://www.websovet.com/html5-novye-tegi-header-footer-nav-aside-section-article-hgroup)


- [Свойство display на дока гайд](https://doka.guide/css/display/#primer)
- [Гид по flexbox на дока гайд](https://doka.guide/css/flexbox-guide/)

- [CSS: вписываем изображение в область](https://www.tune-it.ru/web/leksa/blog/-/blogs/1996258#:~:text=%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B9%20%D1%81%D0%BF%D0%BE%D1%81%D0%BE%D0%B1%20%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D1%82%D1%81%D1%8F%20%D0%B2%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B8,%D0%B2%D1%82%D0%BE%D1%80%D0%BE%D0%B5%20%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B1%D1%83%D0%B4%D0%B5%D1%82%20%D1%80%D0%B0%D1%81%D1%81%D1%87%D0%B8%D1%82%D0%B0%D0%BD%D0%BE%20%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8.)

### [Домашняя работа](../fpy-homeworks/content-structure-tags/README.md)
